<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>房购中心列表</title>
</head>
<link rel="icon" href="${ctx}/images/favicon.ico" type="image/x-icon" />
<script type="text/javascript"
	src="${ctx}/common/script/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/gritter.js"></script>
<script type="text/javascript"
	src="${ctx}/common/script/lib/template.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/css/bootstrap.css">
<link href="${ctx}/css/style.css" rel="stylesheet" />
<body>
<p id="pingList"
	style="width: 100%; height: 100%; background-color: #614848; z-index: 99; opacity: 0.4; position:fixed; display:none;"/>
	<div id="head-nav" class="navbar navbar-default navbar-fixed-top"
		style="background-color: #8c1717;">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="fa fa-gear"></span>
				</button>
				<a class="navbar-brand" href="#"><span>房购系统</span></a>
			</div>
			<div class="navbar-collapse collapse">
				<a style="font-size: 23px; color: white; margin-left: 33%; ">选择房源</a>
				<ul class="nav navbar-nav navbar-right user-nav">
					<li class="dropdown profile_menu">
						<div class="h_r" style="margin-top: 10px">
							<div class="set" style="text-align: right">
								<div class="set_c">
									<span class="hy">欢迎您！<label>${user.nick_name!}</label></span> <a
										href="Javascript:closeList()" class="set_a"
										style="color: #fff; margin-left: 5px">退出</a>
								</div>
								
							</div>
							<div class="date">
								<span id="Y">2017年</span> <span id="MH">10月</span> <span id="TD">22日</span>
								<span id="D">星期六</span> <span id="H">21</span> <span>:</span> <span
									id="M">59</span> <span>:</span> <span id="S">19</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<!--/.nav-collapse animate-collapse -->
		</div>
	</div>
	<div id="cl-wrapper" class="fixed-menu">
		<div class="tableTitle">
			<table id="tableTitle"
				style="width: 100%; text-align: center; background-color: #6d0e17; color: white;">
				<tr style="border-style: none; height: 40px;">
					<#list buildings as item>
					<td><a href="#"
						style="color: #fff; font-size: 14px; font-weight: lighter;"><label>${item.buildings!}</label>号楼</a></td>
					</#list>
				</tr>
			</table>
		</div>
		<div class="housetable"
			style="width: 100%; height: 760px; text-align: center;">
			<table cellspacing="1" cellpadding="0" border="0" class="houseInfo">
				<thead>
					<tr class="unit">
					</tr>
					<tr>
						<!-- <td colspan="3" width="16%">01(西边户)</td>
						<td colspan="3" width="16%">02</td>
						<td colspan="3" width="16%">03</td>
						<td colspan="3" width="16%">04</td>
						<td colspan="3" width="16%">05</td>
						<td colspan="3" width="16%">06(东边户)</td> -->
					</tr>
					<tr id="house">
					</tr>
				</thead>
				<tbody class="houseData">
				</tbody>
			</table>
		</div>
		<div class="infoTitle"
			style="background-color: white; width: 50%; height: 300px; position: fixed; top: 20%; left: 25%; display: none; z-index:999">
			<div
				style="text-align: center; height: 55px; color: white; background-color: #823535;">
				<br>
				<p style="font-size: 22px; font-weight: bolder;">确认认购</p>
				<div style="float: right; margin-top: -47px;">
					<img src="${ctx}/images/cha.png" width="30px;" height="30px;"
						onclick="Javascript:cha_info()">
				</div>
			</div>
			<div style="height: 300px;">
				<div style="text-align: center; font-size: 16px;">
					<i>距离自动解锁还剩: <i style="color: red;" class="time">30</i> 秒
					</i>
				</div>
				<div style="height: 40px; text-align: center; margin-top: 10px;">
				<input type="hidden" id="room_id">
					<table border="1" class="info">
						<tr>
							<td>姓名</td>
							<td style="color: red;">${user.nick_name!}</td>
							<td>选择序号</td>
							<td style="color: red;"id="room_no"></td>
						</tr>
						<tr>
							<td>身份证号</td>
							<td style="color: red;">${user.id_card!}</td>
							<td>面积</td>
							<td style="color: red;" id="acreage"></td>
						</tr>
						<tr>
							<td>手机号</td>
							<td style="color: red;">${user.phone!}</td>
							<td>单价</td>
							<td style="color: red;" id="price">4322</td>

						</tr>
						<tr>
							<td>置业顾问</td>
							<td style="color: red;" id="adviser"></td>
							<td>总价</td>
							<td style="color: red;" id="total_price">23132132</td>
						</tr>
					</table>
				</div>
				<div style="text-align: center; color: white; margin-top: 20%;"
					class="infoOk">
					<input type="submit" value="确定" onclick="Javascript:houseBuy()" /> <input
						type="reset" value="取消" onclick="Javascript:cha_info()" />
				</div>

			</div>
		</div>

		<div class="kuang"
			style="background-color: white; position: absolute; top: 30%; left: 45%; position: fixed; width: 200px; height: 200px; text-align: center; display: none; z-index:999">
			<div style="margin-top: 20px;">
				<img src="${ctx}/images/ok.png" width=100px; " height="100px;">
				<h2 style="color: green; margin-left: 20px;">操作成功！</h2>
				<input type="button" value="确定" onclick="Javascript:cha_kuang()">
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">		
$(function() {
	get_list();
	$(".tableTitle>table>tbody>tr>td").click(function() {
		$(".tableTitle>table>tbody>tr>td").removeClass("addLi");
		$(this).addClass("addLi");
		$("#house").empty();
		$(".unit").empty();
		$(".houseData").empty();
		get_list();
	});
	$('.tableTitle>table>tbody>tr').each(function() {
		$(this).children(':first').addClass('addLi')
	});
});
$(document).ready(function() {
	$.getJSON("${ctx}/house/delete/trade", {token : localStorage.getItem("token")});
	showTime();
	setInterval(showTime, 1000);
	function showTime() {
		var today = new Date();
		var weekday = new Array(7)
		weekday[0] = "星期日"
		weekday[1] = "星期一"
		weekday[2] = "星期二"
		weekday[3] = "星期三"
		weekday[4] = "星期四"
		weekday[5] = "星期五"
		weekday[6] = "星期六"
		var y = today.getFullYear() + "年";
		var month = (today.getMonth() + 1) + "月";
		var td = today.getDate() + "日";
		var d = weekday[today.getDay()];
		var h = today.getHours();
		var m = today.getMinutes();
		var s = today.getSeconds();
		$('#Y').html(y);
		$('#MH').html(month);
		$('#TD').html(td);
		$('#H').html(h);
		$('#M').html(m);
		$('#S').html(s);
		$('#Y').html(y);
	}
});
function closeList() {
	localStorage.removeItem("token");
	window.location.href = "${ctx}";
}
function get_list() {
	var buildings = 1;
	var tdList = $("#tableTitle>tbody>tr>td");
	for (var i = 0; i < tdList.length; i++) {
		var td = tdList.eq(i).find("label").html();
		if (tdList.eq(i).hasClass("addLi")) {
			buildings = td;
		}
	}
	$.getJSON("${ctx}/house/list", {
		token : localStorage.getItem("token"),
		buildings : buildings
	}, function(data) {
		if (data) {
			var count = parseInt(data.length);
			for (var i = 0; i < data.length; i++) {
				var item = data[i];
				var unit = parseInt(i+1);
				$(".unit").append("<td colspan='3'>"+ item[0].unit+ "单元</td>");
				$("#house").append("<td>房号</td><td>面积(㎡)</td><td>价格</td>");
				for (var j = 0; j < item.length; j++) { 
					var str = '';
					if(item[j].status==0){
						str ="<td style='background-color: red; color: white;' onclick='javascript:info(this)'>"+
						"<input id='val_no' type='hidden' value='"+item[j].buildings+"-"+item[j].unit+"-"+item[j].room_no+"'>"+
						"<input id='val_id' type='hidden' value='"+item[j].id+"'>"+
						"<input id='val_acreage' type='hidden' value='"+item[j].acreage+"'>"+
						"<input id='val_price' type='hidden' value='"+item[j].price+"'>"+
						"<input id='val_total_price' type='hidden' value='"+item[j].total_price+"'>"+
						"<input id='val_adviser' type='hidden' value='"+item[j].adviser+"'>"+
						"<a href='#' style='border: 1px; color: white; cursor: pointer;'>"+item[j].room_no+"</br>购买</a>";
					}else if(item[j].status==1){
						str = "<td style='background-color: green; color: white;'>"+
						"<a style='border: 1px; color: white; cursor: pointer;'>"+item[j].room_no+"</br>已认购</a></td>"
					}else if(item[j].status==2){
						str = "<td style='background-color: #5267f1; color: white;'>"+
						"<a style='border: 1px; color: white; cursor: pointer;'>"+item[j].room_no+"</br>认购中</a></td>"
					}
					if(i==0){
						$(".houseData").append("<tr class='"+j+"data'>"+str+
						"<td>"+item[j].acreage+"</td>"+
						"<td><li>单价："+item[j].price+"</li>"+
						"</li>"+
						"<li>总价："+item[j].total_price+"</li></td></tr>")
					}else{
						if ($(".houseData>tr").hasClass(j+"data")) {
							$("."+j+"data").append(str+
									"<td>"+item[j].acreage+"</td>"+
									"<td><li>单价："+item[j].price+"</li>"+
									"</li>"+
									"<li>总价："+item[j].total_price+"</li></td>")
						}else{
							var t ='';
							var td = "<td></td><td></td><td></td>";
							for (var k = 1; k < unit; k++) {
								t += td; 
							} 
							console.log(t);
							$(".houseData").append("<tr class='"+j+"data'>'"+t+"'</tr>")
							$("."+j+"data").append(str+
									"<td>"+item[j].acreage+"</td>"+
									"<td><li>单价："+item[j].price+"</li>"+
									"</li>"+
									"<li>总价："+item[j].total_price+"</li></td>")
						}
					}
				} 
			}
		}
	});
}
	function info(dom) {
		$("#pingList").css("display", "block");
		var id = $(dom).children('#val_id').val();
		$.getJSON("${ctx}/house/trade", {
			token : localStorage.getItem("token"),
			status : 2,
			id : id
		}, function(json) {
			if(json.success){
				$("#room_id").val(id);
				$("#room_no").text($(dom).children('#val_no').val());
				$("#acreage").text($(dom).children('#val_acreage').val());
				$("#adviser").text($(dom).children('#val_adviser').val());
				$("#price").text($(dom).children('#val_price').val());
				$("#total_price").text($(dom).children('#val_total_price').val());
				$(".infoTitle").css("display", "block");
				countdown = 30;
				settime();
			}else{
				$("#house").empty();
				$(".unit").empty();
				$(".houseData").empty();
				get_list();
				alert(json.error)
			}
		});
	}
	function cha_kuang() {
		$(".infoTitle").css("display", "none");
		$(".kuang").css("display", "none");
		$("#house").empty();
		$(".unit").empty();
		$(".houseData").empty();
		$("#pingList").css("display", "none");
		get_list();
	}
	function houseBuy() {
		var id = $("#room_id").val();
		$.getJSON("${ctx}/house/trade", {
			token : localStorage.getItem("token"),
			status : 1,
			id : id
		}, function(json) {
			console.log(json)
			if (json.success) {
				$(".kuang").css("display", "block");
			} else {
				$("#house").empty();
				$(".unit").empty();
				$(".houseData").empty();
				get_list();
				alert(json.error)
			}
		});
	}
	var countdown = 30;
	var intervalID;
	function settime() {
		$(".time").html(countdown)
		countdown--;
		intervalID = setTimeout(function() {
			if (countdown == 0) {
				cha_info();
			} else {
				settime();
			}

		}, 1000)
	}
	function cha_info() {
		$("#pingList").css("display", "none");
		clearTimeout(intervalID)
		$(".infoTitle").css("display", "none");
		var id = $("#room_id").val();
		$.getJSON("${ctx}/house/trade", {
			token : localStorage.getItem("token"),
			status : 0,
			id : id
		}, function(json) {
			$("#house").empty();
			$(".unit").empty();
			$(".houseData").empty();
			get_list();
		});
	}
</script>
</html>